<script setup lang="ts">
import MdPreview from '@/components/markdown/MdPreview.vue'
import defImg from '@/assets/agent/def_agent.svg'
import { ref, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    data: any
    loading?: boolean
    resultContent?: string
    applicationDetails: any
  }>(),
  {
    data: [],
    loading: false,
    resultContent: ''
  }
)
let totalTime = 0; // 总时长，以秒为单位
const timerId:any = ref(undefined); // 定时器ID
// ts-ignore
const maxNumber: number = 31
const current: any = ref([])

// 生成指定数量的随机数，范围在0-40之间
function generateRandomNumbers(count: number) {
  const numbers: any = [];
  for (let i = 0; i < count; i++) {
    numbers.push(Math.floor(Math.random() * maxNumber + 1));
  }
  current.value.push(...numbers);
}
function getRandomInterval() {
  return Math.floor(Math.random() * 6) + 3;
}

// 启动生成数字的定时器
function startGeneratingNumbers() {
  timerId.value = setInterval(() => {
    const count = Math.floor(Math.random() * 2) + 2;
    generateRandomNumbers(count);

    // 更新总时长
    totalTime += getRandomInterval();

    // 如果总时长超过70秒，停止定时器
    if (totalTime >= 70) {
      clearInterval(timerId.value!);
      timerId.value = undefined;
    }
  }, getRandomInterval() * 1000); // 转换为毫秒
}
startGeneratingNumbers()
watch(() => props.loading, (val) => {
  if (!val) {
    clearInterval(timerId.value)
    timerId.value = undefined;
  }
}, { deep: true })
</script>

<template>
  <div class="step-loading">
    <img class="step-loading-avatar" :src="props.applicationDetails.avatar || defImg" alt="" height="32px" width="32px" >
    <div class="step-loading-card">
      <el-card v-if="props.loading" v-loading="timerId ? false : props.loading" element-loading-text="玩命加载中...">
        <el-steps direction="vertical" v-if="props.loading">
          <el-step v-for="(item, index) in props.data" :key="index" :title="item.title" >
            <template #icon>
              <img src="@/assets/agent/chat/check.svg" alt="">
            </template>
            <template #title>
              <span class="is-process">{{ item.title }}</span>
            </template>
            <template #description>
              <div v-for="(v, i) in item.children" :key="index + '_' + i">
                <img v-if="current.includes(v.id)" src="@/assets/agent/chat/checked.svg" alt="" style="width: 12px; height: 12px;position: relative; top: 2px">
                <img v-else class="loading-img" src="@/assets/agent/chat/loading-s.svg" alt="" style="width: 12px; height: 12px; top: 2px">
                {{ v.title }}
              </div>
            </template>
          </el-step>
        </el-steps>
      </el-card>
      <div v-else>
        <slot>
          <MdPreview
            editorId="preview-only"
            :modelValue="resultContent"
            class="maxkb-md"
            style="padding: 20px 30px;"
          />
        </slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-steps--vertical) {
  //gap: 10px
}
:deep(.el-step__line) {
  border-left: 2px dashed #DFE0E3;
  background-color: transparent;
  top: 5px !important;
}
:deep(.el-step__title.is-wait)  {
  color: var(--el-text-color-primary);
  font-weight: bold;
}
:deep(.el-step__description.is-process) {
  color: var(--el-text-color-placeholder);;
}
.step-loading {
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: row;
  overflow-y: auto;
  .step-loading-card {
    flex: 1;
    min-height: 400px;
    margin-left: 10px;
    .md-editor {
      border-radius: 6px;
      padding: 16px;
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .loading-img {
      animation: rotate 2s linear infinite;
      width: 16px;height: 16px;position: relative; top: 4px;
    }
  }
}
</style>
